﻿<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>IT行业职位需求分析系统</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<!-- basic styles -->
		<link href="assets/css/bootstrap.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="assets/css/font-awesome.min.css" />

		<!--[if IE 7]>
		  <link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css" />
		<![endif]-->

		<!-- page specific plugin styles -->


		<!-- ace styles -->

		<link rel="stylesheet" href="assets/css/ace.min.css" />
		<link rel="stylesheet" href="assets/css/ace-rtl.min.css" />
		<link rel="stylesheet" href="assets/css/ace-skins.min.css" />

		<!--[if lte IE 8]>
		  <link rel="stylesheet" href="assets/css/ace-ie.min.css" />
		<![endif]-->

		<!-- inline styles related to this page -->

		<!-- ace settings handler -->

		<script src="assets/js/ace-extra.min.js"></script>

		<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->

		<!--[if lt IE 9]>
		<script src="assets/js/html5shiv.js"></script>
		<script src="assets/js/respond.min.js"></script>
		<![endif]-->
	</head>

	<body>
		<div class="navbar navbar-default" id="navbar">
			<script type="text/javascript">
				try{ace.settings.check('navbar' , 'fixed')}catch(e){}
			</script>

			<div class="navbar-container" id="navbar-container">
				<div class="navbar-header pull-left">
					<a href="#" class="navbar-brand">
						<small>
							<i class="icon-leaf"></i>
							IT行业职位需求分析系统
						</small>
					</a><!-- /.brand -->
				</div><!-- /.navbar-header -->

				<div class="navbar-header pull-right" role="navigation">
					<ul class="nav ace-nav">
						<li class="light-blue">
							<a data-toggle="dropdown" href="#" class="dropdown-toggle">
								<img class="nav-user-photo" src="assets/avatars/user.jpg" alt="Jason's Photo" />
								<span class="user-info">
									<small>欢迎光临</small>
								</span>

								<i class="icon-caret-down"></i>
							</a>

							<ul class="user-menu pull-right dropdown-menu dropdown-yellow dropdown-caret dropdown-close">
								<li>
									<a href="login.html">
										<i class="icon-off"></i>
										退出
									</a>
								</li>
							</ul>
						</li>
					</ul><!-- /.ace-nav -->
				</div><!-- /.navbar-header -->
			</div><!-- /.container -->
		</div>

		<div class="main-container" id="main-container">
			<script type="text/javascript">
				try{ace.settings.check('main-container' , 'fixed')}catch(e){}
			</script>

			<div class="main-container-inner">
				<a class="menu-toggler" id="menu-toggler" href="#">
					<span class="menu-text"></span>
				</a>

				<div class="sidebar" id="sidebar">
					<script type="text/javascript">
						try{ace.settings.check('sidebar' , 'fixed')}catch(e){}
					</script>

					

					<ul class="nav nav-list">
						<li class="active">
							<a href="index.html">
								<i class="icon-dashboard"></i>
								<span class="menu-text"> 控制台 </span>
							</a>
						</li>

						<li>
                            <a href="data.html" class="dropdown-toggle">
                                <i class="icon-tag"></i>
                                <span class="menu-text"> 数据总览 </span>
                            </a>
                        </li>

                        <li>
                            <a href="area.html" class="dropdown-toggle">
                                <i class="icon-tag"></i>
                                <span class="menu-text"> 地区分析 </span>
                            </a>
                        </li>

                        <li>
                            <a href="education.html" class="dropdown-toggle">
                                <i class="icon-tag"></i>
                                <span class="menu-text"> 教育分析 </span>
                            </a>
                        </li>

                        <li>
                            <a href="experience.html" class="dropdown-toggle">
                                <i class="icon-tag"></i>
                                <span class="menu-text"> 经验分析 </span>
                            </a>
                        </li>

						<li>
							<a href="user.html">
								<i class="icon-edit"></i>
								<span class="menu-text"> 用户管理 </span>
							</a>
						</li>

						<li>
							<a href="crawler.html">
								<i class="icon-list-alt"></i>
								<span class="menu-text"> 数据获取 </span>
							</a>
						</li>
					</ul><!-- /.nav-list -->

					<div class="sidebar-collapse" id="sidebar-collapse">
						<i class="icon-double-angle-left" data-icon1="icon-double-angle-left" data-icon2="icon-double-angle-right"></i>
					</div>

					<script type="text/javascript">
						try{ace.settings.check('sidebar' , 'collapsed')}catch(e){}
					</script>
				</div>

				<div class="main-content">
					<div class="breadcrumbs" id="breadcrumbs">
						<script type="text/javascript">
							try{ace.settings.check('breadcrumbs' , 'fixed')}catch(e){}
						</script>

						<ul class="breadcrumb">
							<li>
								<i class="icon-home home-icon"></i>
								<a href="#">首页</a>
							</li>
							<li class="active">控制台</li>
						</ul><!-- .breadcrumb -->

					</div>

					<div class="page-content">
						<div class="page-header">
							<h1>
								控制台
								<small>
									<i class="icon-double-angle-right"></i>
									 查看
								</small>
							</h1>
						</div><!-- /.page-header -->

						<div class="row">
							<div class="col-xs-12">
								<!-- PAGE CONTENT BEGINS -->

								<div class="alert alert-block alert-success">
									<button type="button" class="close" data-dismiss="alert">
										<i class="icon-remove"></i>
									</button>

									<i class="icon-ok green"></i>

									欢迎使用
									<strong class="green">
										IT行业职位需求分析系统
										<small>(v1.0)</small>
									</strong>
									,可以根据搜索框输入想要了解的职位，查看各个城市中详情信息
								</div>

								<div class="row">
									<div class="space-6"></div>
									<div class="col-sm-2"></div>
									<div class="col-sm-8 infobox-container">
						                <form role="form" id="searchForm" class="form-inline">
						                    <div class="form-group"> <input type="text"
						                            class="form-control" id="keyboard" name="keyboard" placeholder="请输入职位关键字">
						                    </div>
						                    <div class="form-group">
						                        <button type="button" id="searchBtn" class="btn btn-default">开始搜索</button>
						                    </div>
						                </form>
									</div>

									<div class="vspace-sm"></div>

									<div class="col-sm-2"></div><!-- /span -->
								</div><!-- /row -->

								<div class="hr hr32 hr-dotted"></div>

								<div class="row">
									<div class="col-sm-12">
										<div class="widget-box transparent">
											<div class="widget-header widget-header-flat">
												<h4 class="lighter">
													<i class="icon-star orange"></i>
													薪资分析
												</h4>
											</div>

											<div class="widget-body">
												<div class="widget-main padding-4" style="height: 500px">
													<div id="container" style="height: 100%;width: 100%"></div>
												</div><!-- /widget-main -->
											</div><!-- /widget-body -->
										</div><!-- /widget-box -->
									</div>
								</div>
								<!-- PAGE CONTENT ENDS -->
							</div><!-- /.col -->
						</div><!-- /.row -->
					</div><!-- /.page-content -->
				</div><!-- /.main-content -->
			</div><!-- /.main-container-inner -->
		</div><!-- /.main-container -->

		<!-- basic scripts -->


		<!--[if !IE]> -->

		<script type="text/javascript">
			window.jQuery || document.write("<script src='assets/js/jquery-2.0.3.min.js'>"+"<"+"script>");
		</script>

		<!-- <![endif]-->

		<!--[if IE]>
<script type="text/javascript">
 window.jQuery || document.write("<script src='assets/js/jquery-1.10.2.min.js'>"+"<"+"script>");
</script>
<![endif]-->

		<script type="text/javascript">
			if("ontouchend" in document) document.write("<script src='assets/js/jquery.mobile.custom.min.js'>"+"<"+"script>");
		</script>
		<script src="assets/js/bootstrap.min.js"></script>
		<script src="assets/js/typeahead-bs2.min.js"></script>

		<!-- page specific plugin scripts -->

		<!--[if lte IE 8]>
		  <script src="assets/js/excanvas.min.js"></script>
		<![endif]-->

		<script src="assets/js/jquery-ui-1.10.3.custom.min.js"></script>
		<script src="assets/js/jquery.ui.touch-punch.min.js"></script>
		<script src="assets/js/jquery.slimscroll.min.js"></script>
		<script src="assets/js/jquery.easy-pie-chart.min.js"></script>
		<script src="assets/js/jquery.sparkline.min.js"></script>
		<script src="assets/js/flot/jquery.flot.min.js"></script>
		<script src="assets/js/flot/jquery.flot.pie.min.js"></script>
		<script src="assets/js/flot/jquery.flot.resize.min.js"></script>

		<!-- ace scripts -->

		<script src="assets/js/ace-elements.min.js"></script>
		<script src="assets/js/ace.min.js"></script>
		<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>

		<!-- inline scripts related to this page -->

		<script type="text/javascript">

			var dom = document.getElementById("container");
			var myChart = echarts.init(dom);
			var app = {};
			var option;

			var posList = [
			    'left', 'right', 'top', 'bottom',
			    'inside',
			    'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
			    'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
			];

			app.configParameters = {
			    rotate: {
			        min: -90,
			        max: 90
			    },
			    align: {
			        options: {
			            left: 'left',
			            center: 'center',
			            right: 'right'
			        }
			    },
			    verticalAlign: {
			        options: {
			            top: 'top',
			            middle: 'middle',
			            bottom: 'bottom'
			        }
			    },
			    position: {
			        options: posList.reduce(function (map, pos) {
			            map[pos] = pos;
			            return map;
			        }, {})
			    },
			    distance: {
			        min: 0,
			        max: 100
			    }
			};

			app.config = {
			    rotate: 90,
			    align: 'left',
			    verticalAlign: 'middle',
			    position: 'insideBottom',
			    distance: 15,
			    onChange: function () {
			        var labelOption = {
			            normal: {
			                rotate: app.config.rotate,
			                align: app.config.align,
			                verticalAlign: app.config.verticalAlign,
			                position: app.config.position,
			                distance: app.config.distance
			            }
			        };
			        myChart.setOption({
			            series: [{
			                label: labelOption
			            }, {
			                label: labelOption
			            }, {
			                label: labelOption
			            }, {
			                label: labelOption
			            }]
			        });
			    }
			};


			var labelOption = {
			    show: true,
			    position: app.config.position,
			    distance: app.config.distance,
			    align: app.config.align,
			    verticalAlign: app.config.verticalAlign,
			    rotate: app.config.rotate,
			    formatter: '{c}  {name|{a}}',
			    fontSize: 16,
			    rich: {
			        name: {
			        }
			    }
			};

			// 初始化
			$(function(){
				myChart.showLoading({
		            text: '数据正在加载...',
		            textStyle: { fontSize : 30 , color: '#444' },
		            effectOption: {backgroundColor: 'rgba(0, 0, 0, 0)'}
		        });
				var message = "";
				var citys = [];
				var min_wage_min = [];
				var min_wage_max = [];
				var min_wage_avg = [];
				var max_wage_min = [];
				var max_wage_max = [];
				var max_wage_avg = [];
				$.ajax({
					url: "http://127.0.0.1:8081/api/crawler/city_analyse_data",
					method: "post",
					dataType: "json",
					success: function(res){
						message = res.results
						for (var i=0; i<message.length;i++){
                            citys.push(message[i].job_city)
                            min_wage_min.push(message[i].min_wage_min)
                            min_wage_max.push(message[i].min_wage_max)
                            min_wage_avg.push(message[i].min_wage_avg)
                            max_wage_min.push(message[i].max_wage_min)
                            max_wage_max.push(message[i].max_wage_max)
                            max_wage_avg.push(message[i].max_wage_avg)
                        };
                        option = {
						    tooltip: {
						        trigger: 'axis',
						        axisPointer: {
						            type: 'shadow'
						        }
						    },
						    toolbox: {
						        show: true,
						        orient: 'vertical',
						        left: 'right',
						        top: 'center',
						        feature: {
						            mark: {show: true},
						            dataView: {show: true, readOnly: false},
						            magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
						            restore: {show: true},
						            saveAsImage: {show: true}
						        }
						    },
						    xAxis: [
						        {
						            type: 'category',
						            axisTick: {show: false},
						            data: citys
						        }
						    ],
						    yAxis: [
						        {
						            type: 'value'
						        }
						    ],
						    series: [
						        {
						            name: '最低值',
						            type: 'bar',
						            barGap: 0,
						            label: labelOption,
						            emphasis: {
						                focus: 'series'
						            },
						            data: min_wage_min
						        },
						        {
						            name: '最高值',
						            type: 'bar',
						            label: labelOption,
						            emphasis: {
						                focus: 'series'
						            },
						            data: max_wage_max
						        },
						        {
						            name: '最高均值',
						            type: 'bar',
						            label: labelOption,
						            emphasis: {
						                focus: 'series'
						            },
						            data: max_wage_avg
						        },
						        {
						            name: '最低均值',
						            type: 'bar',
						            label: labelOption,
						            emphasis: {
						                focus: 'series'
						            },
						            data: min_wage_avg
						        }
						    ]
						};

						if (option && typeof option === 'object') {
						    myChart.setOption(option);
						    myChart.hideLoading();
						}
					},
				})
			});
			// 搜索
			$("#searchBtn").click(function() {
                var keyboard = $("#keyboard").val();
				myChart.showLoading({
		            text: '数据正在加载...',
		            textStyle: { fontSize : 30 , color: '#444' },
		            effectOption: {backgroundColor: 'rgba(0, 0, 0, 0)'}
		        });
		        myChart.clear();
				var message = "";
				var citys = [];
				var min_wage_min = [];
				var min_wage_max = [];
				var min_wage_avg = [];
				var max_wage_min = [];
				var max_wage_max = [];
				var max_wage_avg = [];

                $.ajax({
                     type: "post",
                     url: "http://127.0.0.1:8081/api/crawler/city_analyse_data",
                     cache: false,
                     data: {
                     	keyboard : keyboard
                     },
                     success : function(res) {
						message = res.results
						for (var i=0; i<message.length;i++){
                            citys.push(message[i].job_city)
                            min_wage_min.push(message[i].min_wage_min)
                            min_wage_max.push(message[i].min_wage_max)
                            min_wage_avg.push(message[i].min_wage_avg)
                            max_wage_min.push(message[i].max_wage_min)
                            max_wage_max.push(message[i].max_wage_max)
                            max_wage_avg.push(message[i].max_wage_avg)
                        };
                        option = {
						    tooltip: {
						        trigger: 'axis',
						        axisPointer: {
						            type: 'shadow'
						        }
						    },
						    toolbox: {
						        show: true,
						        orient: 'vertical',
						        left: 'right',
						        top: 'center',
						        feature: {
						            mark: {show: true},
						            dataView: {show: true, readOnly: false},
						            magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
						            restore: {show: true},
						            saveAsImage: {show: true}
						        }
						    },
						    xAxis: [
						        {
						            type: 'category',
						            axisTick: {show: false},
						            data: citys
						        }
						    ],
						    yAxis: [
						        {
						            type: 'value'
						        }
						    ],
						    series: [
						        {
						            name: '最低值',
						            type: 'bar',
						            barGap: 0,
						            label: labelOption,
						            emphasis: {
						                focus: 'series'
						            },
						            data: min_wage_min
						        },
						        {
						            name: '最高值',
						            type: 'bar',
						            label: labelOption,
						            emphasis: {
						                focus: 'series'
						            },
						            data: max_wage_max
						        },
						        {
						            name: '最高均值',
						            type: 'bar',
						            label: labelOption,
						            emphasis: {
						                focus: 'series'
						            },
						            data: max_wage_avg
						        },
						        {
						            name: '最低均值',
						            type: 'bar',
						            label: labelOption,
						            emphasis: {
						                focus: 'series'
						            },
						            data: min_wage_avg
						        }
						    ]
						};

						if (option && typeof option === 'object') {
						    myChart.setOption(option);
						    myChart.hideLoading();
						}
                    }
                });

            });
		</script>
</body>
</html>

